<template>
	<w-app-container class="app-home">
		<fx-page-header title="工种"></fx-page-header>
		<fxListFilter @resetSearch='resetSearch'>
				<template slot="row-1" >
						<el-form-item label="工种：">
						<!-- <w-select ref='workkindSelect' multiple clearable collapseTags :optionlist='workkindList'>
						</w-select> -->
						<w-select-mulity
							ref='workkindSelect'
							:optionlist="workkindList"
							class="form-input"
						>
						</w-select-mulity>
						</el-form-item>
						<el-form-item label="工种类型：" label-width="110px">
						<!-- <w-select ref='workkindTypeSelect' multiple clearable collapseTags :optionlist='workkindTypeList'>
						</w-select> -->
						<w-select-mulity
							ref='workkindTypeSelect'
							:optionlist="workkindTypeList"
							class="form-input"
						>
						</w-select-mulity>
						</el-form-item>
						<el-form-item label="工位：">
						<!-- <w-select ref='stationSelect' multiple clearable collapseTags :optionlist='stationList'>
						</w-select> -->
						<w-select-mulity
							ref='stationSelect'
							:optionlist="stationList"
							class="form-input"
						>
						</w-select-mulity>
						</el-form-item>
				</template>
				<template slot="row-2" >
						<el-form-item label="员工：">
							<!-- <w-select ref='employeeSelect' multiple clearable collapseTags :optionlist='employeeList'>
							</w-select> -->
							<w-select-mulity
								ref='employeeSelect'
								:optionlist="employeeList"
								class="form-input"
							>
							</w-select-mulity>
						</el-form-item>
						<el-form-item label="启停状态：" label-width="110px">
						<el-select v-model="enableState" prop="enableState" placeholder="请选择" clearable size='mini' class="form-input">
							<el-option
								v-for="item in stateList"
								:key="item.id"
								:label="item.label"
								:value="item.id"
							>
							</el-option>
						</el-select>
						</el-form-item>
				</template>
				<template slot="tools">
					<el-row>
						<el-button type="primary" size='mini' @click="searchStation">查询</el-button>
						<el-button type="text" size='mini' @click="resetSearch">重置</el-button>
					</el-row>
				</template>
		</fxListFilter>
		<el-container>
				<w-table
					ref="multipleTable"
					:listData="workKindData"
					:tableColumn="workKindColumns"
					:showPagination="true"
					:showColumnFilterBtn="false"
					minWidth="100px"
					:listTotal="totalCount"
					@on-table-row-dbclick="editRow"
					@on-size-change="handleSizeChange"
					@on-current-change="handleCurrentChange"
					@on-edit-relation="editRowRelation">
					<div slot="btn-tools-right" class="tools-right">
						<el-button type="danger" plain size='mini' @click="mutileDel">删除</el-button>
							<el-button type="success" plain size='mini' @click="mutileEnable">启用</el-button>
							<el-button type="info" plain size='mini' @click="mutileDiable">停用</el-button>
							<el-button type="primary"	size='mini' icon="el-icon-plus" @click="addWorkkind">新建工位</el-button>
					</div>
				</w-table>
		</el-container>
		<el-dialog :title="dialogTitle" :visible.sync="workkindInfoDialogVisible" width='480px'  :before-close="beforeClose">
			<div class="create-area">
			<el-form :model="workkindForm" label-position='right' label-width='100px'  :rules="workkindRules" ref="workkindForm" size='mini' style="height:180px;">
					<el-form-item label="工种编号" prop="code" label-width="110px">
						<el-input v-model="workkindForm.code" autocomplete="off" class="form-item-input"></el-input>
					</el-form-item>
					<el-form-item label="工种名称" prop="name" label-width="110px">
						<el-input v-model="workkindForm.name" autocomplete="off" class="form-item-input"></el-input>
					</el-form-item>
					<el-form-item label="工种类型" prop="workkindTypeId" label-width="110px">
						<w-select :multiple='false' v-model="workkindForm.workKindTypeId" allowCreate
						:clearable='true' :collapseTags='false' :optionlist='workkindTypeList' :isBlock='true' @blur="workkindTypeBlur" class="form-item-input">
						</w-select>
					</el-form-item>
					<el-form-item label="工位" prop="stationEntitys" label-width="110px">
						<el-input autocomplete="off" class="form-item-input">
							<w-icon slot='suffix' class="el-input__icon" type="relation-station" size="mini"  @click="handelStation"></w-icon>
						</el-input>
						<el-tag v-if="workkindForm.stationEntitys.length >= 1" style="position:absolute;left:0;">
							{{workkindForm.stationEntitys[0].name}}
						</el-tag>
						<el-tag  style="position:absolute;right:80px;" v-if="workkindForm.stationEntitys.length > 1">
							+{{workkindForm.stationEntitys.length - 1}}
						</el-tag>
					</el-form-item>
					<el-form-item label="员工" prop="employeeEntitys" label-width="110px">
						<el-input autocomplete="off" class="form-item-input">
							<w-icon slot='suffix' class="el-input__icon" type="relation-person" size="mini"  @click="handelemployee"></w-icon>
						</el-input>
						<el-tag v-if="workkindForm.employeeEntitys.length >= 1" style="position:absolute;left:0;">
							{{workkindForm.employeeEntitys[0].name}}
						</el-tag>
						<el-tag  style="position:absolute;right:80px;" v-if="workkindForm.employeeEntitys.length > 1">
							+{{workkindForm.employeeEntitys.length - 1}}
						</el-tag>
					</el-form-item>
					<el-form-item label="启停状态" prop="enable" label-width="110px">
						<el-switch v-model="workkindForm.enable" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="备注" prop="remark" label-width="110px">
						<el-input
								v-model="workkindForm.remark"
								type="textarea"
								:rows="3"
								:maxlength="200"
								placeholder="请输入备注"
								class="form-item-input"
								show-word-limit
								resize="none"
							/>
					</el-form-item>
			</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="doClose">取 消</el-button>
				<el-button type="primary" @click="doSave('workkindForm')">保 存</el-button>
			</div>
		</el-dialog>
		<employeetransferDialog ref="employeetransferDialog" @on-save-employee="doSaveEmployee" :selectStation="selectStation" @on-copy-employee="copyEmployee"></employeetransferDialog>
		<stationtransferDialog ref="stationtransferDialog" @on-save-station="doSaveStation" :selectStation="selectStation" @on-copy-station="copyStation"></stationtransferDialog>
		<fxCopy :hasTree="false" :copyTableData="copyTableData"
			ref="copyDialog"
			:columns="copyWorkKindColumns"
			:copyTotalCount="copyTotalCount"
			@on-copysave="copySave">
		</fxCopy>
	</w-app-container>
</template>
<script>
import fxListFilter from '@/components/common/Fx-list-filter.vue'
import fxCopy from '@/components/common/Fx-copy.vue'
import employeetransferDialog from './employeeTransferDialog.vue'
import stationtransferDialog from './stationTransferDialog.vue'
import APP_STATE_CONFIG from '@/config/app_state_config.js'
import FxListStateTag from '@/components/common/Fx-list-state-tag.vue'
export default {
	name: 'workkind',
	components: {
		fxListFilter,
		fxCopy,
		employeetransferDialog,
		stationtransferDialog
	},
	data () {
		return {
			tableHeight: (document.body.clientHeight - 200) + 'px',
			stateList: APP_STATE_CONFIG.enableState,
			workkindList: [],
			workkindTypeList: [],
			stationList: [],
			employeeList: [],
			enableState: '',
			workKindData: [],
			workKindColumns: [
				{ prop: 'code', label: '工种编码', required: true, width: '80px' },
				{ prop: 'name', label: '工种名称', required: true, showOverflowTooltip: true },
				{
					prop: 'workKindTypeName',
					label: '工种类型',
					required: true
				},
				{
					prop: 'stationName',
					label: '工位',
					required: true,
					formatterIcon: true,
					iconType: 'relation-station'
				},
				{
					prop: 'employeeName',
					label: '员工',
					required: true,
					formatterIcon: true,
					iconType: 'relation-person'
				},
				{
					prop: 'enable',
					label: '启停状态',
					required: true,
					fxRender: this.enableRender
				},
				{ prop: 'remark', label: '备注', required: true, showOverflowTooltip: true },
				{
					prop: 'modifyUser', label: '修改人', required: true
				},
				{
					prop: 'modifyDate', label: '修改时间', required: true, showOverflowTooltip: true
				},
				{
					prop: 'createUser', label: '创建人', required: true
				},
				{
					prop: 'createDate', label: '创建时间', required: true, showOverflowTooltip: true
				}
			],
			totalCount: 0,
			workkindInfoDialogVisible: false,
			dialogTitle: '',
			workkindForm: {
				id: '',
				code: '',
				name: '',
				workkindTypeId: '',
				stationEntitys: [],
				employeeEntitys: [],
				enable: '1',
				remark: ''
			},
			addworkkindTypeName: '',
			workkindRules: {
				code: [
					{ required: true, message: '请输入工位编号', trigger: 'change' },
					{ min: 1, max: 20, message: '长度最多20个字符', trigger: 'blur' }
				],
				name: [
					{ required: true, message: '请输入工位名称', trigger: 'change' },
					{ min: 1, max: 50, message: '长度最多50个字符', trigger: 'blur' }
				],
				workkindTypeId: [
					{ min: 1, max: 50, message: '长度最多50个字符', trigger: 'blur' }
				],
				contactName: [
					{ min: 1, max: 50, message: '长度最多50个字符', trigger: 'blur' }
				],
				mobile: [
					{ min: 1, max: 20, message: '长度最多20个字符', trigger: 'blur' }
				],
				remark: [
					{ min: 1, max: 200, message: '长度最多200个字符', trigger: 'blur' }
				]
			},
			fxDataVerification: null,
			workLineDialogVisible: false,
			selectStation: '',
			selectemployee: '',
			editStation: false,
			editEmployee: false,
			busType: 1,
			copyInfoDialogVisible: false,
			copyTreeData: [],
			copyTableData: [],
			copyTotalCount: 0,
			copySelTreeId: '',
			copyType: '',
			copyWorkKindColumns: [{
				label: '工种编号',
				prop: 'code',
				width: '100px'
			}, {
				label: '工种名称',
				prop: 'name',
				width: '120px'
			}, {
				label: '工种类型',
				prop: 'workKindTypeName',
				width: '120px'
			}]
		}
	},
	created () {
		// 填充工位下拉框
		this.getStationList()
		// 填充工种下拉框
		this.getWorkkindList()
		// 填充工种类型下拉框
		this.getWorkkindTypeList()
		// 填充员工下拉框
		this.getEmployeeList()
		// 刷新列表
		this.onRefreshWorkKindList()
	},
	computed: {
		enableFormaterState (val, key) {
			return (val, key) => {
				return this.$fxStateMiddleware.getStateObj('enableState')(val)[key]
			}
		}
	},
	methods: {
		// 填充工位下拉框
		getStationList () {
			this.getAllStationList().then(res => {
				this.stationList = res
			})
		},
		// 填充工种下拉框
		getWorkkindList () {
			this.getAllWorkkindList().then(res => {
				this.workkindList = res
			})
		},
		// 填充工种类型下拉框
		getWorkkindTypeList () {
			this.getAllWorkkindTypeList().then(res => {
				this.workkindTypeList = res
			})
		},
		// 填充员工下拉框
		getEmployeeList () {
			this.getAllEmployeeList().then(res => {
				this.employeeList = res
			})
		},
		// 获取员工下拉选择数据
		getAllEmployeeList () {
			return new Promise(resolve => {
				this.$fxApi('employee.findListAll').then(res => {
					resolve(res)
				})
			})
		},
		// 获取工位下拉选择数据
		getAllWorkkindList () {
			return new Promise(resolve => {
				this.$fxApi('workKind.getWorkKindListAll').then(res => {
					resolve(res)
				})
			})
		},
		// 获取工种类型下拉选择数据
		getAllWorkkindTypeList () {
			return new Promise(resolve => {
				this.$fxApi('workKind.findWorkKindTypeListAll').then(res => {
					resolve(res)
				})
			})
		},
		// 获取工位下拉选择数据
		getAllStationList () {
			return new Promise(resolve => {
				this.$fxApi('station.findListAll').then(res => {
					resolve(res)
				})
			})
		},
		// 列表数据
		onRefreshWorkKindList () {
			const searchParams = {
				pageNum: (this.$refs.multipleTable && this.$refs.multipleTable.getPaginationParams().pageNum) || 1,
				pageSize: (this.$refs.multipleTable && this.$refs.multipleTable.getPaginationParams().pageSize) || 20
			}
			var params = {
				workKindIds: [],
				workKindTypeIds: [],
				employeeIds: [],
				stationIds: [],
				enable: null
			}
			if (this.enableState !== '') {
				params.enable = this.enableState
			}
			// 工种下拉
			if (this.$refs.workkindSelect && this.$refs.workkindSelect.currentValue.length >= 1) {
				params.workKindIds = this.$refs.workkindSelect.currentValue
			}
			// 工种类型下拉
			if (this.$refs.workkindTypeSelect && this.$refs.workkindTypeSelect.currentValue.length >= 1) {
				params.workKindTypeIds = this.$refs.workkindTypeSelect.currentValue
			}
			// 工位下拉
			if (this.$refs.stationSelect && this.$refs.stationSelect.currentValue.length >= 1) {
				params.stationIds = this.$refs.stationSelect.currentValue
			}
			// 员工下拉
			if (this.$refs.employeeSelect && this.$refs.employeeSelect.currentValue.length >= 1) {
				params.employeeIds = this.$refs.employeeSelect.currentValue
			}
			if (Object.keys(params).length !== 0) {
				searchParams.params = params
			}
			return new Promise(resolve => {
				this.$fxApi('workKind.findAllWorkKinds')({
					data: searchParams
				}).then(res => {
					this.totalCount = this.$fxUtils.toNumber(res.total)
					this.workKindData = res.data
					this.$refs.multipleTable.clearSelected()
					resolve()
				})
			})
		},
		handleSizeChange (val) {
			this.onRefreshWorkKindList()
		},
		handleCurrentChange (val) {
			this.onRefreshWorkKindList()
		},
		addWorkkind () {
			this.editStation = false
			this.editEmployee = false
			this.selectStation = ''
			return new Promise(resolve => {
				Promise.all([
					this.getAllWorkkindTypeList(),
					this.getNextCode()
				]).then(([workkindTypeList, newCode]) => {
					this.workkindTypeList = workkindTypeList
					console.log(this.workkindTypeList)
					this.showDialog(newCode)
					resolve()
				})
			})
		},
		showDialog (code) {
			this.workkindInfoDialogVisible = true
			if (this.$refs.workkindForm) {
				this.$refs.workkindForm.resetFields()
			}
			Object.keys(this.workkindForm).map(m => {
				this.workkindForm[m] = ''
			})
			this.workkindForm.code = code
			this.addworkkindTypeName = ''
			this.workkindForm.stationEntitys = []
			this.workkindForm.employeeEntitys = []
			this.workkindForm.enable = '1'
			this.fxDataVerification = this.$fxUtils.fxDataVerification(this.workkindForm)
			this.dialogTitle = '新建工种'
		},
		renderStationInfo (res) {
			const { code, id, workKindTypeId, enable, name, remark } = res
			this.workkindForm = {
				code,
				id,
				workKindTypeId,
				enable,
				name,
				remark
			}
			console.log(this.workkindForm)
			this.workkindForm.stationEntitys = res.stationEntitys ? res.stationEntitys : []
			this.workkindForm.employeeEntitys = res.employeeEntitys ? res.employeeEntitys : []
			this.workkindForm.enable = res.enable ? '1' : '0'
			this.fxDataVerification = this.$fxUtils.fxDataVerification(this.workkindForm)
		},
		doClose () {
			this.VerityCompanyData()
		},
		beforeClose () {
			this.VerityCompanyData()
		},
		VerityCompanyData () {
			const isChange = !this.fxDataVerification.checkData(this.workkindForm)
			if (isChange) {
				this.$fxCommon.orderListFrontFunc('VeritybeforeClose').then(() => {
					this.doSave('workkindForm')
				}).catch(() => {
					this.workkindInfoDialogVisible = false
				})
				return false
			} else {
				this.workkindInfoDialogVisible = false
			}
		},
		// 工位类型 失去焦点
		workkindTypeBlur (e, value) {
			if (value) {
				this.addworkkindTypeName = value
			}
		},
		doSave (formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.saveOrUpdate().then(this.$fxCommon.orderSuccess('save')).then(() => {
						this.workkindInfoDialogVisible = false
						this.onRefreshWorkKindList()
					})
				} else {
					return false
				}
			})
		},
		editRow (row, column, event) {
			this.editStation = false
			this.editEmployee = false
			this.selectStation = row.id
			this.dialogTitle = '修改工种'
			return new Promise(resolve => {
				Promise.all([
					this.getAllWorkkindTypeList(),
					this.findWorkKindDetailById(row)
				]).then(([workkindTypeList, detail]) => {
					this.workkindInfoDialogVisible = true
					this.workkindTypeList = workkindTypeList
					this.renderStationInfo(detail)
					resolve()
				})
			})
		},
		editRowRelation (row, prop) {
			if (prop === 'stationName') {
				this.editStation = true
				this.editEmployee = false
			}
			if (prop === 'employeeName') {
				this.editEmployee = true
				this.editStation = false
			}
			return new Promise(resolve => {
				Promise.all([
					this.findWorkKindDetailById(row)
				]).then(([detail]) => {
					this.renderStationInfo(detail)
					if (prop === 'stationName') {
						this.handelStation(row)
					}
					if (prop === 'employeeName') {
						this.handelemployee(row)
					}
					resolve()
				})
			})
		},
		// 批量删除
		mutileDel () {
			const _selData = this.$refs.multipleTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('deleteMulity', _selData)
				.then(this.deleteStation)
				.then(this.$fxCommon.orderSuccess('deleteMulity'))
				.then(this.onRefreshWorkKindList)
		},
		// 批量启用
		mutileEnable () {
			const _selData = this.$refs.multipleTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('enableMulity', _selData).then(() => {
				this.handleState(1).then(this.$fxCommon.orderSuccess('enableMulity')).then(this.onRefreshWorkKindList)
			})
		},
		// 批量停用
		mutileDiable () {
			const _selData = this.$refs.multipleTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('disableMulity', _selData).then(() => {
				this.handleState(0).then(this.$fxCommon.orderSuccess('disableMulity')).then(this.onRefreshWorkKindList)
			})
		},
		// 启用 停用
		handleState (type) {
			const _selData = this.$refs.multipleTable.selectedRowArr
			const ids = _selData.map(workkind => workkind.id)
			return new Promise(resolve => {
				this.$fxApi('workKind.updateEnables')({
					data: {
						workKindIds: ids,
						enable: type
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		resetSearch () {
			this.enableState = ''
			this.$refs.workkindSelect.currentValue = []
			this.$refs.workkindTypeSelect.currentValue = []
			this.$refs.stationSelect.currentValue = []
			this.$refs.employeeSelect.currentValue = []
		},
		// 查询集团
		searchStation () {
			this.onRefreshWorkKindList()
		},
		// 获取编号
		getNextCode () {
			return new Promise(resolve => {
				this.$fxApi('workKind.getNextCode').then(res => {
					resolve(res)
				})
			})
		},
		// 获取集团信息
		findWorkKindDetailById (row) {
			return new Promise(resolve => {
				this.$fxApi('workKind.findWorkKindDetailById')({
					query: {
						id: row.id
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		// 新建更新集团信息
		saveOrUpdate () {
			const { code, id, contactName, enable, mobile, name, remark } = this.workkindForm
			const postData = {
				id,
				code,
				contactName,
				enable,
				mobile,
				name,
				remark
			}
			// 当是新建车间类型的时候
			if (this.addworkkindTypeName) {
				postData.archiveTypeDTO = {
					id: '',
					name: this.addworkkindTypeName
				}
			} else {
				if (this.workkindForm.workKindTypeId) {
					postData.archiveTypeDTO = {
						id: this.workkindForm.workKindTypeId,
						name: ''
					}
				}
			}
			// 关联员工
			if (this.workkindForm.employeeEntitys) {
				postData.employeeIds = this.workkindForm.employeeEntitys.map(s => {
					return s.id
				})
			}
			// 关联工位
			if (this.workkindForm.stationEntitys) {
				postData.stationIds = this.workkindForm.stationEntitys.map(s => {
					return s.id
				})
			}
			return new Promise(resolve => {
				this.$fxApi('workKind.saveOrUpdate')({
					data: postData
				}).then(res => {
					resolve(res)
				})
			})
		},
		// 删除集团信息
		deleteStation () {
			const _selData = this.$refs.multipleTable.selectedRowArr
			const ids = []
			_selData.forEach((v) => {
				ids.push(v.id)
			})
			return new Promise(resolve => {
				this.$fxApi('workKind.deleteMulity')({
					data: {
						workkindIds: ids,
						workKindIds: ids,
						WorkKindIds: ids,
						ids: ids
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		handelStation (row) {
			if (row.id) {
				this.selectStation = row.id ? row.id : ''
			}
			const id = this.workkindForm.id || this.selectStation
			this.$refs.stationtransferDialog.open(id, this.workkindForm.stationEntitys)
		},
		handelemployee (row) {
			if (row.id) {
				this.selectStation = row.id ? row.id : ''
			}
			const id = this.workkindForm.id || this.selectemployee
			this.$refs.employeetransferDialog.open(id, this.workkindForm.employeeEntitys)
		},
		doSaveEmployee (sels) {
			this.workkindForm.employeeEntitys = sels
			this.$forceUpdate()
			if (this.editEmployee) {
				this.saveOrUpdate().then(this.$fxCommon.orderSuccess('save')).then(() => {
					this.onRefreshWorkKindList()
				})
			}
		},
		doSaveStation (sels) {
			this.workkindForm.stationEntitys = sels
			this.$forceUpdate()
			if (this.editStation) {
				this.saveOrUpdate().then(this.$fxCommon.orderSuccess('save')).then(() => {
					this.onRefreshWorkKindList()
				})
			}
		},
		// 复制工种关系
		copyStation () {
			this.copyStationList(this.workkindForm.id).then(res => {
				this.copyTableData = res
				this.copyTableData.forEach((v) => {
					v.id = v.worKindId
				})
				this.copyTotalCount = res.length
				this.$refs.copyDialog.open()
			})
		},
		// 复制工种关系
		copyEmployee () {
			this.copyEmployeeList(this.workkindForm.id).then(res => {
				this.copyTableData = res
				this.copyTableData.forEach((v) => {
					v.id = v.worKindId
				})
				this.copyTotalCount = res.length
				this.$refs.copyDialog.open()
			})
		},
		// 复制 右侧工位列表
		copyStationList (id) {
			return new Promise(resolve => {
				this.$fxApi('workKind.copyWorkKindSelect')({
					query: {
						id: id
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		// 复制 右侧工位列表
		copyEmployeeList (id) {
			return new Promise(resolve => {
				this.$fxApi('workKind.copyWorkKindSelect')({
					query: {
						id: id
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		copySave (selData, busType) {
			this.copyType = busType
			this.busType = this.editStation ? 1 : 2
			return this.$fxCommon.orderListFrontFunc('copyMulity', selData)
				.then(this.doCopySave)
				.then(this.$fxCommon.orderSuccess('copyMulity'))
				.then(this.closeDialog)
				.then(this.onRefreshWorkKindList)
		},
		closeDialog () {
			this.$refs.copyDialog.onCancelClick()
		},
		doCopySave (data) {
			return new Promise(resolve => {
				const copyIds = data.map(d => {
					return d.worKindId
				})
				this.$fxApi('workKind.fromWorkkindTocopyRelation')({
					data: {
						operType: this.copyType,
						busType: this.busType,
						copyId: copyIds,
						currentId: this.workkindForm.id
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		enableRender (h, { row }) {
			return <FxListStateTag
				icon={this.enableFormaterState(row.enable, 'icon')}
				label={this.enableFormaterState(row.enable, 'label')}
			></FxListStateTag>
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.create-area {
	width: 100%
	height: 400px
	box-sizing: border-box
	.form-item-input {
		width:280px
	}
}
.form-input {
	width: 170px
}
</style>
